/* 响应式设计 */

/* 平板设备 */
@media (max-width: 768px) {
    #gameContainer {
        margin: 10px;
        padding: 15px;
        max-width: 100%;
    }

    .game-header h1 {
        font-size: 2em;
    }

    .score-display {
        font-size: 1em;
        flex-direction: column;
        gap: 5px;
    }

    #gameCanvas {
        width: 100%;
        max-width: 350px;
        height: auto;
    }

    .game-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .power-ups {
        flex-wrap: wrap;
        gap: 10px;
    }

    .power-up-btn {
        min-width: 50px;
        padding: 8px 12px;
        font-size: 1em;
    }

    .overlay-content {
        margin: 20px;
        padding: 20px;
        max-width: 280px;
    }

    .settings-content {
        margin: 20px;
        min-width: auto;
        width: calc(100% - 40px);
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    body {
        padding: 5px;
        overflow-x: hidden;
        overscroll-behavior: none;
        min-height: 100vh;
    }

    #gameContainer {
        margin: 5px;
        padding: 10px;
        border-radius: 15px;
        width: calc(100% - 10px);
        max-width: 100%;
        box-sizing: border-box;
    }

    .game-header h1 {
        font-size: 1.8em;
        margin-bottom: 8px;
    }

    .score-display {
        font-size: 0.9em;
    }

    #gameCanvas {
        width: 100%;
        max-width: 320px;
        height: 480px;
        max-height: 60vh;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .canvas-container {
        border-width: 2px;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    .control-panel {
        gap: 10px;
        flex-wrap: wrap;
    }

    .game-info {
        padding: 10px;
        font-size: 0.9em;
        min-height: 60px;
    }

    .ball-preview {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .power-ups {
        gap: 8px;
    }

    .power-up-btn {
        min-width: 45px;
        padding: 6px 10px;
        font-size: 0.9em;
    }

    .power-up-btn .count {
        width: 18px;
        height: 18px;
        font-size: 0.6em;
    }

    .game-footer {
        gap: 10px;
        margin-top: 15px;
    }

    .footer-btn {
        padding: 6px 10px;
        font-size: 0.8em;
    }

    .overlay-content {
        margin: 15px;
        padding: 15px;
        max-width: 250px;
    }

    .overlay-content h2 {
        font-size: 1.5em;
    }

    .overlay-content p {
        font-size: 0.9em;
    }

    .game-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .settings-content {
        margin: 15px;
        padding: 20px;
    }

    .setting-item {
        font-size: 0.9em;
        margin-bottom: 12px;
    }

    .settings-menu {
        padding: 10px;
    }

    .settings-content {
        min-width: auto;
        width: calc(100% - 20px);
        max-width: 300px;
        margin: 10px;
        padding: 20px;
    }

    .settings-content h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 0;
    }

    .setting-item label {
        font-size: 0.9em;
    }

    .setting-item select {
        width: 100%;
        padding: 8px;
        font-size: 0.9em;
    }
}

/* 超小屏幕设备 */
@media (max-width: 320px) {
    .game-header h1 {
        font-size: 1.5em;
    }

    #gameCanvas {
        max-width: 280px;
    }

    .power-ups {
        gap: 5px;
    }

    .power-up-btn {
        min-width: 40px;
        padding: 5px 8px;
        font-size: 0.8em;
    }

    .overlay-content {
        margin: 10px;
    }

    .settings-content {
        margin: 5px;
        padding: 15px;
        max-width: 280px;
    }

    .settings-content h3 {
        font-size: 1.1em;
    }

    .setting-item {
        font-size: 0.8em;
        padding: 12px;
        max-width: 220px;
    }

    .settings-content {
        margin: 10px;
        padding: 15px;
    }
}

/* 横屏适配 */
@media (orientation: landscape) and (max-height: 500px) {
    body {
        align-items: flex-start;
        padding-top: 10px;
    }

    #gameContainer {
        margin-top: 0;
    }

    .game-header {
        margin-bottom: 10px;
    }

    .game-header h1 {
        font-size: 1.8em;
        margin-bottom: 5px;
    }

    .game-main {
        gap: 10px;
    }

    #gameCanvas {
        max-height: 300px;
    }

    .control-panel {
        gap: 8px;
    }

    .game-footer {
        margin-top: 10px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .power-up-btn:hover,
    .footer-btn:hover,
    .game-button:hover {
        transform: none;
    }

    .power-up-btn:active,
    .footer-btn:active,
    .game-button:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* 增大触摸目标 */
    .power-up-btn,
    .footer-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .game-button {
        min-height: 44px;
        padding: 12px 24px;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #gameCanvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    }

    #gameContainer {
        background: rgba(44, 62, 80, 0.95);
        color: #ecf0f1;
    }

    .game-header h1 {
        color: #ecf0f1;
    }

    .score-display {
        color: #bdc3c7;
    }

    .game-info {
        background: rgba(52, 73, 94, 0.7);
        color: #ecf0f1;
    }

    .power-up-btn {
        background: rgba(52, 73, 94, 0.9);
        border-color: #7f8c8d;
        color: #ecf0f1;
    }

    .footer-btn {
        background: rgba(52, 73, 94, 0.8);
        border-color: #7f8c8d;
        color: #ecf0f1;
    }

    .settings-content,
    .overlay-content {
        background: #34495e;
        color: #ecf0f1;
    }

    .setting-item {
        border-bottom-color: #7f8c8d;
    }

    .setting-item label {
        color: #bdc3c7;
    }

    .setting-item select {
        background: #2c3e50;
        border-color: #7f8c8d;
        color: #ecf0f1;
    }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in,
    .fade-out {
        animation: none;
    }

    .particle {
        animation: none;
        opacity: 0;
    }
}